<template>
  <div class>
    <div class="homecontainer">
      <div class="homecontainer-top">
        <div class="leftdiv">
          <div class="leftone">
            <titleborder title="ETC门架">
              <leftone />
            </titleborder>
          </div>
          <div class="lefttwo">
            <titleborder title="告警列表">
              <lefttwo />
            </titleborder>
          </div>
          <div class="leftthree">
            <titleborder title="机柜状态">
              <leftthree />
            </titleborder>
          </div>
        </div>
        <div class="rightdiv">
          <titleborder title="机房数据">
            <computerRoom />
          </titleborder>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftone from "./leftone";
import lefttwo from "./lefttwo";
import leftthree from "./leftthree";
import tollStation from "./tollStation/index";
import computerRoom from "./computerRoom/index";
import mainmap from "./mainmap";
// import cesium from "./cesium";

import titleborder from "../title-border.vue";
import normalborder from "../normalborder.vue";
export default {
  name: "index",
  components: {
    titleborder,
    normalborder,
    leftone,
    lefttwo,
    leftthree,
    mainmap,
    tollStation,
    computerRoom,
    // cesium
  }
};
</script>

<style lang='scss' scoped>
.leftdiv {
  // flex: 2;
  position: absolute;
  width: calc(100vw / 10 * 2.5);
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  padding: 0px 0px 10px 45px;
  z-index: 5;
  .leftone {
    padding-top: 10px;
    flex: 4;
  }
  .lefttwo {
    padding-top: 10px;
    flex: 6;
  }
  .leftthree {
    padding-top: 10px;
    flex: 6;
  }
}
.rightdiv {
  position: absolute;
  // top: 84px;
  // right: 0px;
  left: calc(100vw - (100vw / 10 * 2.5) - 40px);
  width: calc(100vw / 10 * 2.5);
  height: calc(100vh - 110px);
  padding: 0px 0px 0px 0px;
  // z-index: 5;
}
</style>
